<template>
  <div :style="{ width: '100%', height: '100%' }">
    <div class="row-item relative row acen mt16">
      <div class="b MYH c303 f18 ml20 " style="border-left:4px solid #42A9FD;padding:0 10px">特殊人群统计</div>
      <div class="row abs r10">
         <el-button plain  @click="getList()" autofocus=true>关爱人员</el-button>
          <el-button plain  @click="getList('998cd4a3-1e36-4fd2-b040-978f429bb90a')">重点人员</el-button>
      </div>
    </div>
    <div :style="{ width: '100%', height: '88%' }" ref="special" v-loading="loading"></div>
  </div>
</template>

<script>
import { debounce } from "@/common/utils";
export default {
  data() {
    return {
      list: [1, 2, 3],
      nameArr: ["2", "3", "4"],
      loading:true // 名字数组
    };
  },
   mounted() {
    this.getList();
  },

  methods: {
    // 获取特殊人员列表
    getList: debounce(function(PDID) {
      this.$api.first
        .sign_type_number({
          PDID: PDID ? PDID : "c4805dbf-9d64-4a2b-b67f-c18a7a37983b" // 民生关爱
        })
        .then(res => {
          if(res.code==0){
          this.loading =false
          let arr = res.data;
          this.list=[]
          this.list = arr.map(it => {
            return it.value;
          });
          this.nameArr=[]
          this.nameArr = arr.map(it => {
            return it.name.slice(0,4);
          });
          this.echarth();
          }
        });
    }),
    // 初始化
    echarth() {
      let myChart = this.$echarts.init(this.$refs.special);
      let option = {
        xAxis: {
          type: "category",
          data: this.nameArr,
          splitLine:{
            show:true,
            lineStyle:{
              type:'dashed'
            }
          }
        },
        yAxis: {
          type: "value",
            splitLine:{
            show:true,
            lineStyle:{
              type:'dashed'
            }
          }
        },
        series: [
          {
            data: this.list,
            type: "bar",
            barWidth: 20, // 条宽
            color: "#409EFF",
            itemStyle: {
               normal: {
                    label: {
                        show: true, //开启显示
                        position: 'top', //在上方显示
                        textStyle: { //数值样式
                            color: 'black',
                            fontSize: 16
                        }
                    }
                }
            }
          }
        ]
      };
      
     
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  },

  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  }
};
</script>

<style lang="css" scoped>
.btn {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #303030;
  width: 84px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.row-item {
  height: 72px;
}
</style>
